<template>
	<view class="classTest">
		<!-- 导航栏 -->
		<navBar :backFont="true" :title="className" >
			<template #right_btn>
				<view class="right_btn" @click="StopSports">
					<uni-icons class="right_arrow" type="close" ></uni-icons>
					<text>结束测试</text>
				</view>
			</template>
		</navBar>	
		
		<view class="main_con">
			<view class="left_card">
				<text class="card_title">{{currentSportName}}</text>
				<view class="student_list_left" v-show="!is_showScore">
					<view class="student_card" @click="show_score(item)" v-for=" (item,index) in reactive_obj.cameraAreaList">
						<text class="area">A{{index + 1}}</text>
						<view class="students_info" v-show="item.isChecked">
							<view class="avatorCon_left">
								<image class="avator" src="../../static/icons/right.png" mode="widthFix"></image>
								<sexName :name="item.Name" :sex="item.Sex"></sexName>
							</view>
							<text class="performance">{{item.sportsCount ? item.sportsCount : 0 }}次</text>
						</view>
						<view class="students_info_add_con" v-show="!item.isChecked">
							<label @click.stop="choose_student_method(index)">
								<uni-icons  class="students_info_add_img" type="plus" ></uni-icons>
							</label>
						</view>
					</view>
					<!-- <view class="student_card" v-for=" (item,index) in [1,2,3,4]">
						<text class="area">A1</text>
						<view class="students_info_add_con">
							<uni-icons @click="choose_student_method" class="students_info_add_img" type="plus" ></uni-icons>
						</view>
					</view> -->
				</view>
				<view class="student_test" v-show="is_showScore">
					<view class="fanhuiCon">
						<text class="fanhuiFont" @click="backToCamera">返回</text>
					</view>
					<view class="big_avator_con">
						<image class="big_avator" src="../../static/icons/right.png" mode="widthFix"></image>
						<sexName class="bigSexName" :name="reactive_obj.score_detail.Name" sex="0" ></sexName>
					</view>
					<view class="score_cards">
						<view class="score">
							<text>成绩(厘米)</text>
							<text>{{reactive_obj.score_detail.sportsCount ? reactive_obj.score_detail.sportsCount : 0 }}次</text>
						</view>
						<view class="score">
							<text>分数(分)</text>
							<text>--</text>
						</view>
						<view class="score">
							<text>等级</text>
							<text>--</text>
						</view>
					</view>
				</view>
				
				<view class="btn_group">
					<myBtn class="score_btn" title="重测" fontColor="#aaa" color="#f5f5f5" width="10vw" height="5vh"></myBtn>
					<myBtn class="score_btn" title="修正成绩" fontColor="#aaa" color="#f5f5f5" width="13vw" height="5vh"></myBtn>
					<myBtn class="score_btn" @click="clickStartSports" title="开始测试" color="#0aa1ed" width="18vw" height="5vh"></myBtn>
					<myBtn class="score_btn" title="下一组" @click="nextGroup" fontColor="#0aa1ed" color="#fff" width="10vw" height="5vh"></myBtn>
				</view>
			</view>
			<view class="right_card">
				<text class="card_title">学生名单</text>
				<view class="tabClass">
					<uniTabs @getTabs="getSonData" :list="tablist" ></uniTabs>
				</view>
				<view class="student_list_right_con">
					<view :class="{student_list_right:true,moveTabs:done == 0,moveTabsBack:done == 1}" >
						<view  class="student_card_right" v-for="(item,index) in reactive_obj.student_not_test_list">
							<image class="avator_right" src="../../static/icons/right.png" mode="widthFix"></image>
							<view class="students_info_right">
								<sexName :name="item.Name" :sex="item.Sex"></sexName>
								<text class="studengId">{{item.StudentID}}</text>
							</view>
						</view>
					</view>
					<view :class="{student_list_right:true,moveTabs:done == 0,moveTabsBack:done == 1}" >
						<view  class="student_card_right" v-for="(item,index) in reactive_obj.student_tested_list">
							<image class="avator_right" src="../../static/icons/right.png" mode="widthFix"></image>
							<view class="students_info_right">
								<sexName :name="item.Name" :sex="item.Sex"></sexName>
								<text class="studengId">{{item.StudentID}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="model_choose_student" v-show="choose_student">
			<view class="choose_main">
				<text class="title_choose">请选择学生</text>
				<view class="select_con">
					<uni-search-bar   v-model="searchValue" placeholder="输入学生姓名以搜索" cancelButton="none" @input="searchMethod">
					</uni-search-bar>
				</view>
				<view class="student_choose_lists">
					<view :class=" {student_choose_card : true,active_student_choose_card: index == current_count,testedList:item.tested}" v-for=" (item,index) in reactive_obj.searchList"  @click="clickStudentCard(index)">
						<sexName :name="item.Name" :sex="item.Sex"></sexName>
					</view>
				</view>
				<view class="popup_btn_con">
					<myBtn class="popup_btn" @click="close_student_method" title="取消" color="#aaa" width="15vw" height="6vh"></myBtn>
					<myBtn class="popup_btn" @click="confirm_student_method" title="确定" color="#0aa1ed" width="15vw" height="6vh"></myBtn>
				</view>
			</view>
		</view>
		<view v-show="choose_student" class="mask_choose">
		</view>
	</view>
	<view >
		<sportsCamera isConnect="isConnect" @sportsResult="getSportsResult"></sportsCamera>
	</view>
</template> 

<script lang="ts" setup>
	import { ref,reactive,onMounted } from "vue";
	import requester from "../../server/requester";
	import {
		    onLoad,
			onUnload
		  } from "@dcloudio/uni-app";
	let a = false
	let userToken:any
	//上级页面传过来的 班级id 以及 运动id
	let classId :any
	let sportsID:any
	let className:any = ref('')
	let isConnect = ref(false)
	let currentSportName = ref('')
	onMounted(()=>{
			try {
				userToken = uni.getStorageSync('user_token');
				console.log("userToken====>>>",userToken);
				if (userToken == "") {
					uni.navigateTo({
						url:'/pages/login/login',
					})
				}
				// getClassStudent()
				getTestedStudent()
				// startSports()
			} catch (e) {
				// error
				uni.navigateTo({
					url:'/pages/login/login',
				})
			}
		})
		let record:any = null
	    /*运动类型 */
		// onLoad 接受 页面传递的参数
		  onLoad((option) => {
		   console.log(option);
		   classId = option.classId
		   console.log("classId===>>",classId);
		   sportsID = option.sportsID
		   console.log("sportsID===>>",sportsID);
		   className.value  = option.className
		   console.log("className===>>",className.value);
		   currentSportName.value = getSportsName(sportsID)
		   
		  });
		  //销毁页面是关闭测试
		  onUnload(()=>{
			 if (record == null){
			 	return
			 }else{
			 	endSports(record)
			 }
		  })
		  
		  const getSportsName = (sportsID:any)=>{
		  	if (sportsID == "1001") {
		  		return "立定跳远"
		  	}else if (sportsID == "1002") {
		  		return "100米"
		  	}else if (sportsID == "1003") {
		  		return "引体向上"
		  	}else if (sportsID == "1004") {
		  		return "仰卧起坐"
		  	}else if (sportsID == "1005") {
		  		return "跳绳"
		  	}else if (sportsID == "1006") {
		  		return "实心球"
		  	}
		  }
	let reactive_obj = reactive({
		student_list:[
		]as any[],//所有学生列表
		student_tested_list:[
		]as any[],//已测试的学生列表
		student_not_test_list:[
		]as any[],//未测试的学生列表
		searchList:[]as any[],//搜索列表
		cameraAreaList:[
			{
				isChecked:false
			},
			{
				isChecked:false
			},
			{
				isChecked:false
			},
			{
				isChecked:false
			},
		]as any[],//摄像头区域列表
		score_detail:{}as any,
	}) 
	let tablist = [`未测`,`已测`]
	
	
	let current_count = ref(0)
	
	let clickStudentCard = (index :any)=>{
		current_count.value = index
		
	}
	
	let done = ref(100)
	
	let getSonData =(e:any)=>{
		console.log('我是什么数据?',e);
		if (e == 0) {
			done.value = 1
		}else{
			done.value = 0
		}
	}
	
	let loading = ref(false)

	const goAddFace = () => {
		uni.navigateTo({
			url:"/pages/addStudentsPicture/addStudentsPicture"
		})
	}
	//选择学生的模态框 
	let choose_student = ref(false)
	//当前点击的区域坐标
	let areaCurrent:any
	//打开选择学生模态框 --赋值 并去除已经选择过的学生
	const choose_student_method = (event:any)=>{
		areaCurrent = event
		choose_student.value = true
		
		reactive_obj.searchList = reactive_obj.student_list
		
		reactive_obj.student_list.forEach((v:any,index:any)=>{
			reactive_obj.cameraAreaList.forEach((value:any)=>{
				if (value.StudentID  == v.StudentID) {
					reactive_obj.student_list.splice(index,1)
				}else{
					return
				}
				
			})	
		})
		console.log(choose_student.value);
		
	}
	//关闭模态框
	const close_student_method = ()=>{
		choose_student.value = false
		console.log(choose_student.value);
	}
	//确认选择
	const confirm_student_method = ()=>{
		//选择完学生 将信息展示在区域里
		console.log('=====>>',reactive_obj.student_list[current_count.value]);
		reactive_obj.cameraAreaList[areaCurrent] = reactive_obj.student_list[current_count.value]
		reactive_obj.cameraAreaList[areaCurrent].isChecked = true 
		choose_student.value = false
	}
	
	//下一组 
	const nextGroup = ()=>{
		let list = []
		reactive_obj.student_not_test_list.forEach((v:any)=>{
			if (list.length == 4) {
				return
			}
			let result = reactive_obj.cameraAreaList.every((value:any)=>{
				return value.StudentID  != v.StudentID
			})
			if(result){
				v.isChecked = true 
				list.push(v)
			}
		})
		reactive_obj.cameraAreaList = list 
		
	}
	
	
	//搜索框的值
	let searchValue = ref('')
	const searchMethod = (e:any)=>{
		console.log('===>>',e);
		reactive_obj.searchList = []
		if (reactive_obj.student_list.length == 0 ) {
			uni.showToast({
				title:'无学生，无法查询',
				icon:"none"
			})
			return
		}else{
			let list =  []
			//检索所有学生列表里是否有此姓名学生 ， 并判断是否已经展示在区域内
			reactive_obj.student_list.forEach((v:any)=>{
				if (v.Name.includes(e)) {
					let result = reactive_obj.cameraAreaList.every((value:any)=>{
						return value.StudentID  != v.StudentID
					})
					if(result){
						list.push(v)
					}else{
						return
					}
				}
			})
			reactive_obj.searchList = list 
		}
		
	}
	let is_showScore = ref(false)
	
	//打开成绩面板
	let show_score = (item:any)=>{
		if (!item.Name) {
			return
		}
		is_showScore.value = true
		reactive_obj.score_detail = item
	}
	//返回摄像头面板
	let backToCamera = ()=>{
		is_showScore.value = false
	}
	
	//获取班级内的学生详情
	// const getClassStudent = async()=>{
	// 	let data = {
	// 		ClassID:Number(classId) 
	// 	}
	// 	let result:any = await requester({
	// 		url:'/AiSports/Student/Query',
	// 		method:'POST',
	// 		data,
	// 		headers:{
	// 			token:userToken
	// 		}
	// 	})
		
	// 	console.log( '获取到的学生列表====>>>', result);
	// 	reactive_obj.student_list = result.data.studentList
	// }
	//获取已经测试  和  未测试 的学生列表
	const getTestedStudent = async()=>{
		console.log('我开始获取学生列表了');
		console.log('步骤进行时1');
		let new_data = new Date()
		let year:any = new_data.getFullYear()
		let mouth:any = new_data.getMonth() + 1 
		let dattttt:any = new_data.getDate()
		if(mouth<10){
			mouth = "0" + mouth.toString()
		}
		if(dattttt<10){
			dattttt = "0" + dattttt.toString()
		}
		console.log('步骤进行时3', new_data );
		let  date = year + "-" + mouth +  "-" + dattttt
		let data = {
			sportsFlag:false,
			sportDate:date,
			sportsId:sportsID.toString(),
			clazzId:Number(classId)
		}
		console.log('步骤进行时3',JSON.stringify(data));
		let result:any = await requester({
			url:'/AiSports/Student/unSport',
			method:'POST',
			data,
			headers:{
				token:userToken
			}
		})
		console.log( '未测学生列表====>>>', result.data);
		// reactive_obj.student_list = 
		// reactive_obj.student_tested_list = 
		reactive_obj.student_not_test_list = result.data
		reactive_obj.student_not_test_list.forEach((v:any)=>{
			v.tested = false
		})
		let data_tested = {
			sportsFlag:true,
			sportDate:date,
			sportsId:sportsID.toString(),
			clazzId:Number(classId)
		}
		let testedList:any = await requester({
			url:'/AiSports/Student/unSport',
			method:'POST',
			data:data_tested,
			headers:{
				token:userToken
			}
		})
		reactive_obj.student_tested_list = testedList.data
		console.log( '已测学生列表====>>>', testedList.data);
		reactive_obj.student_tested_list.forEach((v:any)=>{
			v.tested = true
		})
		reactive_obj.student_list = reactive_obj.student_not_test_list.concat(reactive_obj.student_tested_list)
	}
	
	
	
	const clickStartSports = ()=>{
		uni.showModal({
			title: '确认开始测试',
			success: function (res) {
				if (res.confirm) {
					console.log('用户点击确定');
					startSports()
				} else if (res.cancel) {
					console.log('用户点击取消');
					return
				}
			}
		});
	}
	//开始测试
	const startSports = async ()=>{
		let data = {
			cameraId:1,
			sportsId:sportsID.toString(),
			clazzId:Number(classId),
			aiPointId: 0,
			studentIdList: [
			]
		}
		reactive_obj.cameraAreaList.forEach((v:any)=>{
			if ( !v.id ) {
				return
			}else{
				data.studentIdList.push( v.id )
			}
			
		})
		if (data.studentIdList.length == 0) {
			uni.showToast({
				title:'未添加学生，无法开始测试',
				icon:"none"
			})
			return
		}
		let result:any = await requester({
			baseUrl:true,
			url:'/startSport',
			method:'POST',
			data,
			headers:{
				token:userToken
			}
		})
		console.log( '开始测试====>>>', result);
		record = result.data.recordId
		isConnect.value = true
	}
	let getSportsResult = (result:any)=>{
		 let data = JSON.parse(result)
		 console.log( '子组件传过来的数据===>>>>>>',data)
		 let studentResult = data["sport-data"].students
		 console.log('处理过的结果===>>>>>',studentResult);
		 reactive_obj.cameraAreaList.forEach((v:any)=>{
			studentResult.forEach((value:any)=>{
				if (value.id == v.id) {
					 v.sportsCount = value.count
					 return
				}
			 })
		 })
		 console.log('我有结果吗？',reactive_obj.cameraAreaList);
	}
	
	//结束测试
	const endSports = async (recordId:any)=>{
		let data = {
			recordId:recordId,
		}
		let result:any = await requester({
			baseUrl:true,
			url:'/stopSport',
			method:'POST',
			data,
			headers:{
				token:userToken
			}
		})
		console.log( '结束测试====>>>', result);
		isConnect.value = false
		uni.showToast({
			title:"已结束测试",
			icon:"none"
		})
	}
	
	//结束测试
	const StopSports= ()=>{
		if (record == null){
			uni.showToast({
				title:"未开启运动检测",
				icon:"none"
			})
			return
		}else{
			endSports(record)
		}
	}
	
	
	const getCameraList = async ()=>{
		let data ={
				sportsId:sportsID
			}
		let result:any = await requester({
			url:'/AiSports/camera/Query',
			method:'POST',
			data,
			headers:{
				token:userToken
			}
		})
		console.log('查询相机列表====>>>', result);
		console.log('==>>>',result.data.cameraList
);
	}
	getCameraList()
	
	// const aaaaaaaa = async ()=>{
	// 	let data = {
	// 		  SysAccount: "9632587410",
	// 		  StudentID: "1537",
	// 		  Name: "张老八",
	// 		  Certificate: "123123",
	// 		  Address: "新辉环路",
	// 		  Telephone: "151110",
	// 		  ClassID: 6,
	// 		  SportsLevel: "string",
	// 		  Sex: "0",
	// 		  Birthday: "2023-05-08",
	// 		  FacePic: "string",
	// 		  FullBodyShot: "string",
	// 		  GradeID: 3,
	// 		  Password: "123456",
	// 		  Height: "170cm",
	// 		  Weight: "60kg",
	// 		  SchoolID:1
	// 		}
	// 	console.log("JSON格式 ====>>>",JSON.stringify(data));	
	// 	let result:any = await requester({
	// 		url:'/AiSports/Student/Add',
	// 		method:'POST',
	// 		data,
	// 		headers:{
	// 			token:userToken
	// 		}
	// 	})
	// 	console.log( '添加学生====>>>', result);
	// }
	// aaaaaaaa()
	// const aaaaaaaa = async ()=>{
	// 	let data ={
	// 		  // Telephone: "15371673836",
	// 		  // Name: "黄琦仁",
	// 		  // Password: "123456",
	// 		  // TeacherID: "101",
	// 		  // Certificate: "320723123123X",
	// 		  // Address: "新辉环路6号",
	// 		  // Sex: "1",
	// 		  // Birthday: "2024-05-08",
	// 		  // SysAccount: "hqr",
	// 		  // SchoolID: 1,
	// 		  // DepartmentID: 1
	// 		}
	// 	let result:any = await requester({
	// 		url:'/AiSports/Teacher/Query',
	// 		method:'POST',
	// 		data,
	// 		headers:{
	// 			token:userToken
	// 		}
	// 	})
	// 	console.log( '学校信息====>>>', result);
	// }
	// aaaaaaaa()
</script>

<style>
.classTest{
	width: 100vw;
	display: flex;
	flex-direction: column;
}
.right_btn{
	display: flex;
	align-items: center;
	border: 1px solid #0aa1ed ;
	padding: 1vh 1vw ;
	color: #0aa1ed;
	font-size: 0.8rem;
	border-radius: 2vw;
}
.right_arrow{
	color: #0aa1ed !important;
}
.main_con{
	display: flex;
	width: 96vw;
	margin: 0 auto;
	margin-top: 13vh;
	justify-content: space-evenly;
}
.left_card{
	display: flex;
	flex-direction: column;
	width: 62vw;
	background-color: #fff;
	border-radius: 1vw;
	padding: 1vh 1vw;
	align-items: center;
	flex-shrink: 0 ;
	box-sizing: border-box;
	height: 80vh;
}
.card_title{
	display: flex;
	height: 6vh;
	margin: 0 auto;
	align-items: center;
	width: 100%;
	justify-content: space-evenly;
	border-bottom: 1px solid #f8f8f8;
}
.student_list_left{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: 60vh;
	overflow: auto;
	padding-top: 1vh;
	align-items: flex-start;
}
.student_card{
	width: 29vw;
	background-color: #fff;
	border-radius: 1vw;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 18vh;
	margin-right: 1vw;
	margin-bottom: 1vh;
	border: 1px solid #f8f8f8;
	box-sizing: border-box;
	background-color: #f9f9f9;
}
.area{
	display: block;
	text-align: center;
	background-color: #d7ffff;
	color:#0055ff ;
	width: 20%;
}
.students_info{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-grow: 1;
	padding: 0 5% 0 10%;
}
.avatorCon_left{
	display: flex;
	align-items: center;
}
.avator{
	width: 3vw;
	border-radius: 50%;
	margin-right: 1vw;
}
.student_test{
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding: 0vh 0 0 0 ;
}
.big_avator_con{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 15vw;
}
.big_avator{
	width: 8vw;
	border-radius: 50%;
	margin: 2vh 0;
}
.bigSexName{
	transform: scale(1.5);
	margin: 2vh 0;
}
.score_cards{
	display: flex;
	justify-content: space-evenly;
}
.score{
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	width: 15vw;
	height: 15vw;
	border-radius: 2vw;
	margin: 0 1vw;
	background-color: lavender;
	align-items: center;
	color: #0aa1ed;
	font-size: 1.5rem
}
.btn_group{
	display: flex;
	height: 15vh;
	align-items: center;
	
}
.score_btn{
	margin: 0 1vw;
}
.right_card{
	display: flex;
	width: 28vw;
	flex-direction: column;
	background-color: #fff;
	border-radius: 1vw;
	padding:  1vw;
	align-items: center;
}
.tabClass{
	width: 18vw;
	margin: 0 auto;
	margin-bottom: 1vh;
}
.student_list_right_con{
	display: flex;
	overflow: hidden;
	width: 26vw;
}
.student_list_right{
	display: flex;
	flex-direction: column;
	overflow: auto;
	width: 26vw;
	height: 70vh;
	flex-shrink: 0;
}
.student_card_right{
	display: flex;
	align-items: center;
	width: 26vw;
	padding: 1vh 1vw ;
	box-sizing: border-box;
	flex-shrink: 0 ;
	margin: 0.5vh 0 ;
	background-color: #f8f8f8;
	height: 10vh;
}
@keyframes moveTabs {
    from { transform: translateX(0%); }
    to { 
		transform: translateX(-100%);
		}
}
@keyframes moveTabsBack {
	from { transform: translateX(-100%); }
	to { 
		transform: translateX(0%);
		}
}
.moveTabs{
	animation: moveTabs 0.3s ease-in forwards;
}
.moveTabsBack{
	animation: moveTabsBack 0.3s ease-in forwards;
}
.avator_right{
	width: 3vw;
	border-radius: 50%;
	margin-right: 1vw;
}
.students_info_right{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.studengId{
	color: #aaa;
	font-size: 0.9rem;
}
.students_info_add_con{
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	height: 100%;
}
.students_info_add_img{
	font-size: 3rem !important;
	color: #aaa !important;
}
.model_choose_student{
	position: absolute;
	width: 40vw;
	height: 40vw;
	left: 50% ;
	top: 50%;
	background-color:  #f8f8f8;
	z-index: 1000000;
	transform: translateX(-50%) translateY(-50%);
	
}
.mask_choose{
	    position:fixed;
	    top     : 0;
	    left    : 0;
	    bottom  : 0;
	    right   : 0;
	    background:rgba(0,0,0,.5); 
}
.choose_main{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}
.title_choose{
	width: 100%;
	display: block;
	height: 5vh;
	background-color: #fff;
	text-align: center;
	padding-top: 3vh ;
}
.select_con{
	width: 100%;
	background-color: #fff;
}
.student_choose_lists{
	width: 90% ;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	height: 30vw;
	overflow: auto;
}
.student_choose_card{
	width: 15vw;
	display: flex;
	align-items: center;
	height: 6vh;
	justify-content: space-evenly;
	background-color: #fff;
	margin: 0.5vh 1.5vw;
}
.active_student_choose_card{
	background-color: #0aa1ed !important;
	color: #fff !important;
}
.popup_btn_con{
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	height: 10vh ;
	background-color: #fff;
}
.testedList{
	background-color: green;
	color: #fff !important;
}
.fanhuiCon{
	display: flex;
	align-items: center;
	width: 100%;
}
</style>
